<template>
    <div id="tabPane"  v-loading="loading">
        <el-row>
            <el-col :xs="24" :sm="24" :md="24" class="date-search">
                    <el-date-picker
                    v-model="date"
                    type="daterange" 
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button icon="el-icon-search" type="primary" circle @click="search"></el-button>
            </el-col>
        </el-row>
        <el-row class="total">
            <el-col :xs="23" :sm="11" :md="8" :lg="5" :offset="1" class="total-box">
                <p class="title">
                    流水
                </p>
                <p class="date">
                   {{startDate}} - {{endDate}} 
                </p>
                <p>
                    合计
                </p>
               <p>
                    {{sum}}
               </p>
            </el-col>
            <el-col :xs="23" :sm="11" :md="8" :lg="5" :offset="1" class="total-box">
                <p class="title">
                    毛利润
                </p>
                <p class="date">
                   {{startDate}} - {{endDate}} 
                </p>
                <p>
                    合计
                </p>
               <p>
                   {{total_profit}}
               </p>
            </el-col>
        </el-row>
        <!-- 日期 -->
        <el-table
            :data="tableData"
            style="width: 100%" v-show="type==0"
            :default-sort = "{prop: 'date', order: 'descending'}"
            @sort-change='sortChange'
            >
            <el-table-column
            prop="date"
            label="日期"
            sortable="custom"
            >
            </el-table-column>
            <el-table-column
            prop="amount"
            label="流水">
            </el-table-column>
            <el-table-column
            prop="gross_profit"
            label="毛利润">
            </el-table-column>
        </el-table>

        <!-- 游戏 -->
         <el-table
            :data="tableData"
            style="width: 100%" v-show="type==1"
            :default-sort = "{prop: 'date', order: 'descending'}"
            @sort-change='sortChange'
            :cell-style="cellColor">
            <el-table-column
            prop="name"
            sortable="custom"
            label="游戏名字"> 
            </el-table-column>

            <el-table-column
            prop="added_time"
            sortable="custom"
            label="上线时间">
            </el-table-column>

            <el-table-column
            prop="dismounted_time"
            sortable="custom"
            label="下线时间">
            </el-table-column>

            <el-table-column
            prop="day"
            label="运营天数">
            </el-table-column>

            <el-table-column
            prop="amount"
            sortable="custom"
            label="流水">
            </el-table-column>

            <el-table-column
            prop="gross_profit"
            sortable="custom"
            label="毛利润">
            </el-table-column>
        </el-table>

        <!-- 类型 -->
         <el-table
            :data="tableData"
            :default-sort = "{prop: 'date', order: 'descending'}"
            @sort-change='sortChange'
            style="width: 100%" v-show="type==2">
            <el-table-column
            prop="name"
            sortable="custom"
            label="类型名字">
            </el-table-column>

            <el-table-column
            prop="game_number"
            label="游戏总数量">
            </el-table-column>

            <el-table-column
            prop="number"
            label="新上数量">
            </el-table-column>

            <el-table-column
            prop="amount"
            sortable="custom"
            label="流水">
            </el-table-column>

            <el-table-column
            prop="gross_profit"
            sortable="custom"
            label="毛利润">
            </el-table-column>
        </el-table>

        <!-- 发行商 -->
         <el-table
            :data="tableData"
            :default-sort = "{prop: 'date', order: 'descending'}"
            @sort-change='sortChange'
            style="width: 100%" v-show="type==3">
            <el-table-column
            prop="name"
            sortable="custom"
            label="公司名字">
            </el-table-column>

            <el-table-column
            prop="game_number"
            label="游戏总数量">
            </el-table-column>

            <el-table-column
            prop="number"
            label="新上数量">
            </el-table-column>

            <el-table-column
            prop="amount"
            sortable="custom"
            label="流水">
            </el-table-column>

            <el-table-column
            prop="gross_profit"
            sortable="custom"
            label="毛利润">
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {profitDate,profitGame,profitType,profitPublish} from 'api/server.js'
    export default {
        props:{
            type:{
                type:Number,
                default:0,
                date:''
            }
        },
        data(){
            return{
                tableData: [],
                loading: false,
                date:'',
                saveDate:'',
                listQuery: {
                    page: 1,
                    limit: 10
                },
                total: 0,
                total_profit:0,
                sum:0,
                sort_by:1,
                sort_name:''
            }
        },
        created(){
            this.init()
        },
        methods:{
           init(){
               this.getList();
           },
           initData(){
               this.tableData=[],
               this.loading=false;
               this.date='';
               this.saveDate='';
               this.listQuery={
                   page: 1,
                   limit: 10
               };
               this.total=0;
               this.total_profit=0;
               this.sum=0;
               this.sort_by=1;
               this.sort_name=''
           },
           getList(){
               if(this.type==0){
                   this.loading = true
                   profitDate(this.date,this.listQuery.page,this.listQuery.limit,this.sort_by).then(res=>{
                        if(res.data.error==0){
                            this.total=parseInt(res.data.content.total);
                            this.tableData=res.data.content.data;
                            this.total_profit=res.data.content.total_profit;
                            this.sum=res.data.content.sum;
                            this.loading = false;
                        }else{
                            this.loading = false;
                        }
                    })
               }else if(this.type==1){
                    this.loading = true
                    profitGame(this.date,this.listQuery.page,this.listQuery.limit,this.sort_by,this.sort_name).then(res=>{
                        if(res.data.error==0){
                                this.total=parseInt(res.data.content.total);
                                this.tableData=res.data.content.data;
                                console.log(this.tableData)
                                this.total_profit=res.data.content.total_profit;
                                this.sum=res.data.content.sum;
                                this.loading = false;
                            }else{
                                this.loading = false;
                            }
                        })
               }else if(this.type==2){
                    this.loading = true
                    profitType(this.date,this.listQuery.page,this.listQuery.limit,this.sort_by,this.sort_name).then(res=>{
                    if(res.data.error==0){
                            this.total=parseInt(res.data.content.total);
                            this.tableData=res.data.content.data;
                            this.total_profit=res.data.content.total_profit;
                            this.sum=res.data.content.sum;
                            this.loading = false;
                        }else{
                            this.loading = false;
                        }
                    })
               }else if(this.type==3){
                   this.loading = true
                   profitPublish(this.date,this.listQuery.page,this.listQuery.limit,this.sort_by,this.sort_name).then(res=>{
                        if(res.data.error==0){
                                this.total=parseInt(res.data.content.total);
                                this.tableData=res.data.content.data;
                                this.total_profit=res.data.content.total_profit;
                                this.sum=res.data.content.sum;
                                this.loading = false;
                            }else{
                                this.loading = false;
                            }
                        })
               }
           },
           search(){
               if(!this.date){
                   this.date="";
               }
               this.saveDate=this.date;
               this.getList();
           },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getList();
            },
            cellColor(row,column){
                if(row.column.label=="下线时间"&&row.row.dismounted_time=="正常运营"){
                     return 'color:green';
                }else if(row.column.label=="下线时间"){
                    return 'color:#ddd';
                }
            },
            sortChange (column, prop, order){
                if(column.order=="ascending"){
                    this.sort_by=2;
                    this.sort_name=column.prop;
                    this.init();
                }else if(column.order=="descending"){
                    this.sort_by=1;
                    this.sort_name=column.prop;
                    this.init();
                }
                 //ascending 从小到大   descending从大到小
            },
        },
        computed:{
            startDate(){
                if(this.saveDate){
                    return this.saveDate[0]
                }else{
                    let date = new Date();
                    date.setDate(1);
                    let month = parseInt(date.getMonth()+1);
                    var day = date.getDate();

                    if (month < 10) {
                        month = '0' + month
                    }
                    if (day < 10) {
                        day = '0' + day
                    }
                    return date.getFullYear() + '-' + month + '-' + day;
                }
            },
            endDate(){
                if(this.saveDate){
                    return this.saveDate[1]
                }else{
                    let date=new Date();
                    let currentMonth=date.getMonth();
                    let nextMonth=++currentMonth;
                    let nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
                    let oneDay=1000*60*60*24;
                    let lastTime = new Date(nextMonthFirstDay-oneDay);
                    let month = parseInt(lastTime.getMonth()+1);
                    let day = lastTime.getDate();
                    if (month < 10) {
                        month = '0' + month
                    }
                    if (day < 10) {
                        day = '0' + day
                    }
                    return date.getFullYear() + '-' + month + '-' + day;
                }
            }
        },
        watch:{
            type(newType,oldType){
                if(newType!==oldType){
                    this.initData();
                    this.getList();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
.date-search{
    text-align: left;
}
.total{
    padding:20px 0;
    font-size: 14px;
    color: #606266;
    text-align: left;
    .total-box{
        padding: 10px;
        border: 1px solid #ddd;
        /* background: #f0f3f4; */
    }
    .title{
        font-size:16px;
        line-height:32px;
        color:#333;
    }
    .date{
        margin-bottom:10px;
        color:#999;
    }
}
.pagination-container {
    margin-top: 30px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}
</style>